<template>

  <div>
    <hr><br>
    <h1> === 这是 child  dom</h1>

    <hr><br>
  </div>
</template>

<script>
export default {
  name:'ChildDom',
  mounted () {
    this.$nextTick(() => {
      window.addEventListener('message', this.handleMessage)

      // 告诉父组件准备好接收消息了
      window.parent.postMessage('this is child dom , ready ... ', '*')
    })
  },
  destroyed () {
      // 注意移除监听！注意移除监听！注意移除监听！
      window.removeEventListener('message', this.handleMessage)
  },
  methods: {
    handleMessage (event) {
      // 根据上面制定的结构来解析 iframe 内部发回来的数据

      console.log('child dom handleMessage : ' , event.data );
    }
  }
}
</script>

<style>

</style>
